<script type="text/ecmascript-6">
    /**
     * Created by wcz on 2017/1/8.
     */
    import address from './address'

    export default {
        data () {
            return {
                creditors: [],
                pageIndex: 1,
                pageSize: 15,
                total: 0,
                imgVisible: false,
                pointImgSlim: '',
                pointMsg: '',
                searchForm: {
                    state: '2',
                    role: '0',
                    name: '',
                    province: '',
                    city: '',
                    referrer: '', // 推荐人id
                },
                cdn: window.cdn,
                roleMap: {
                    "0": 'A',
                    "1": 'B',
                    "2": 'C',
                },
                referrerName: '',
                hisReferrer: ''
            }
        },
        computed: {
            isListEmpty () {
                return this.creditors.length == 0
            },
            provinces () {
                let province = [];
                for (let i in address) {
                    if (address.hasOwnProperty(i)) {
                        province.push(i)
                    }
                }
                return province;
            },
            citys () {
                return address[this.searchForm.province]
            }
        },
        mounted () {
            this.getList()
        },
        methods: {
            getList (currentPage = 1) {
                let pd      = {};
                pd.p        = currentPage;
                pd.s        = this.pageSize;
                pd.role     = this.searchForm.role;
                pd.name     = this.searchForm.name;
                pd.province = this.searchForm.province;
                pd.city     = this.searchForm.city;
                pd.referrer = this.searchForm.referrer;

                this.get('/downstreams', pd, {loading: 'xhrPending', err: '获取线人列表失败'})
                    .then(res => {
                        if (res.success && res.data.rows) {
                            this.creditors = res.data.rows.map(e => {
                                let ele       = e;
                                ele.time      = e.create_at.split(' ')[0];
                                ele.isCaptain = e.is_captain ? '是' : '否';
                                ele.type      = this.roleMap[e.role];
                                return ele
                            });
                            this.pageIndex = res.data.page + 1;
                            this.total     = res.data.total;

                        } else {
                            this.creditors = [];
                        }
                    })
            },
            changeIndex (pi) {
                this.getList(pi)
            },
            viewImg (imgSrc, msg) {
                this.pointImgSlim = `${cdn}${imgSrc}?imageslim`;
                this.pointMsg     = msg;
                this.imgVisible   = true;
            },
            closeView () {
                this.imgVisible   = false;
                this.pointImgSlim = ''
            },
            pass (id) {
                let postData = new FormData();
                postData.append('verify', 1);

                this.jax(`/api/v1/downstreams/${id}/verify`, postData, {err: '请求失败，请稍后再试'})
                    .then(res => {
                        if (res.success) {
                            this.msg('成功通过', 'success');
                            this.getList();
                        }
                    })
            },
            search () {
                this.getList()
            },
            refuse (id) {
                let postData = new FormData();
                postData.append('verify', 0);

                this.jax(`/api/v1/downstreams/${id}/verify`, postData, {err: '请求失败，请稍后再试'})
                    .then(res => {
                        if (res.success) {
                            this.msg('拒绝成功', 'success');
                            this.getList();
                        }
                    })
            },
            handleTabSelect (state) {
                this.searchForm.role = state;
                this.getList();
            },
            seeServant (id, name) {
                this.searchForm.referrer = id;
                this.referrerName        = name;
                this.getList();
            },
            getHisReferrer (id) {
                let pd = {};
                pd.p   = 1;
                pd.s   = 15;
                pd.id  = id;

                this.get('/downstreams', pd, {err: '获取推荐人失败'})
                    .then(res => {
                        if (res.success && res.data.rows) {
                            this.hisReferrer = res.data.rows[0].name

                        } else {
                            this.hisReferrer = '获取失败'
                        }
                    })
            },
            cleanHisReferrer () {
                this.hisReferrer = ''
            }
        },
    };
</script>

<template>
    <div class="creditor">
        <el-menu default-active="0" mode="horizontal" @select="handleTabSelect" layout="row center-left">
            <el-menu-item index="0">A类</el-menu-item>
            <el-menu-item index="1">B类</el-menu-item>
            <el-menu-item index="2">C类</el-menu-item>
            <div self="right" class="cb__bar-right cb__bar-right--800" layout="row center-justify">
                <el-input
                        class="tasks__tool-input"
                        icon="search"
                        placeholder="按名字搜索"
                        @change="search"
                        v-model="searchForm.name">
                </el-input>
                <el-select
                        filterable
                        v-model="searchForm.city"
                        class="cb__search-sel"
                        placeholder="请选择市"
                        @change="search"
                >
                    <el-option v-for="city in citys" :label="city" :value="city"></el-option>
                </el-select>
                <el-select
                        filterable
                        v-model="searchForm.province"
                        class="cb__search-sel"
                        placeholder="请选择省"
                        @change="search"
                >
                    <el-option v-for="province in provinces" :label="province" :value="province"></el-option>
                </el-select>
                <el-input disabled v-model="referrerName" placeholder="推荐人" style="width: 180px">
                    <el-button slot="append" @click="seeServant('', '')">返回</el-button>
                </el-input>
            </div>
        </el-menu>
        <div class="creditor__content" v-loading.body="xhrPending">
            <div class="wh-table">
                <div class="wh-table__thead" layout="row center-left">
                    <div class="th w32" v-if="searchForm.role == '2'">合作方名称 / 账号</div>
                    <div class="th w17" v-else>名字 / 账号</div>
                    <div class="th w13">工作地点</div>
                    <div class="th w20" v-if="searchForm.role == '0'">推荐码</div>
                    <div class="th w10 tac">线人类型</div>
                    <div class="th w15 tac" v-if="searchForm.role == '0'">是否队长</div>
                    <div class="th w15 tac" v-if="searchForm.role == '1'">公司</div>
                    <div class="th w15 tac">账户余额</div>
                    <div class="th w10 tac">申请时间</div>
                </div>
                <div v-if="isListEmpty" class="wh-table__tbody--empty">无记录</div>
                <div v-else class="wh-table__tbody" layout="row center-left" v-for="(creditor, index) in creditors">
                    <div class="td w32" v-if="searchForm.role == '2'">
                        <h5 class="wh-table__em">{{creditor.name}}</h5>
                        <p class="wh-table__lighter">{{creditor.phone}}</p>
                    </div>
                    <div class="td w17" v-else @mouseenter="getHisReferrer(creditor.referrer)" @mouseleave="cleanHisReferrer">
                        <el-tooltip :content="'推荐人:' + hisReferrer">
                            <h5 class="wh-table__em">{{creditor.name}}</h5>
                        </el-tooltip>
                        <p class="wh-table__lighter">{{creditor.phone}}</p>
                    </div>
                    <div class="td w13">
                        {{creditor.province}} - {{creditor.city}}
                    </div>
                    <div class="td w20 em" v-if="searchForm.role == '0'"
                         @click="seeServant(creditor.id, creditor.name)">
                        {{creditor.recommend_code}}
                    </div>
                    <div class="td w10 tac">
                        {{creditor.type}}
                    </div>
                    <div class="td w15 tac" v-if="searchForm.role == '0'" layout="column center-center">
                        <i v-if="creditor.is_captain" class="iconfont success">&#xe600;</i>
                        <i v-else class="iconfont error">&#xe84c;</i>
                    </div>
                    <div class="td w15 tac" v-if="searchForm.role == '1'">{{creditor.company}}</div>
                    <div class="td w15 tac">
                        {{creditor.fund}}
                    </div>
                    <div class="td w10 tac">
                        {{creditor.time}}
                    </div>
                </div>
                <!-- pagination-->
                <div v-if="!isListEmpty" class="wh-table__page" layout="row center-center">
                    <el-pagination
                            @current-change="changeIndex"
                            :current-page="pageIndex"
                            :page-size="pageSize"
                            :total="total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- viewImg-->
        <div v-if="imgVisible" class="img__modal" layout="column center-center">
            <i class="img__close el-icon-close" @click="closeView"></i>
            <p class="point__msg">{{pointMsg}}</p>
            <img :src="pointImgSlim" class="img__big"/>
        </div>
    </div>
</template>